<template>
  <el-table :data="attendanceList" border>
    <el-table-column prop="id" label="序号" />
    <el-table-column prop="username" label="姓名" />
    <el-table-column prop="workNumber" label="工号" />
    <el-table-column prop="departmentName" label="部门" />
    <el-table-column prop="mobile" label="手机" />
    <el-table-column v-for="(k, index) in days" :key="index" prop="" :label="k.date">
      <template #default="scope">
        <!--  -->
        <el-popover placement="top" :width="400" trigger="hover">
          <div style="height:60px;line-height:60px;border-bottom:1px solid #e0e0e0;text-align:center;">

            {{ scope.row.username +
              '-' +
              scope.row.attendanceRecord[index].day +
              '-考勤记录' }}

          </div>
          <div style="height:50px;line-height:40px;">上班打卡时间：{{ scope.row.attendanceRecord[index].adtInTime }}
          </div>
          <div style="height:50px;line-height:40px;">上班打卡地点：-</div>
          <div style="height:50px;line-height:50px;">下班打卡时间：{{ scope.row.attendanceRecord[index].adtOutTime }}
          </div>
          <div style="height:50px;line-height:40px;">下班打卡地点：-</div>
          <!-- 在表格中显示的文字 -->
          <template #reference>
            <div>
              <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 2" style="color: red">旷工</div
                class="tem">
              <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 1" style="color: green">正常
              </div class="tem">
              <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 22"
                style="color: rgb(144, 147, 153)">休息</div class="tem">
              <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 3" style="color: coral">迟到
              </div class="tem">
              <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 4">早退</div class="tem">
              <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 5">外出</div class="tem">
              <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 6">出差</div class="tem">
              <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 7">年假</div class="tem">
              <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 8">事假</div class="tem">
              <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 9">病假</div class="tem">
              <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 10">婚嫁</div class="tem">
              <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 11">丧家</div class="tem">
              <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 12">产假</div class="tem">
              <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 13">奖励产假</div class="tem">
              <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 14">陪产假</div class="tem">
              <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 15">探亲假</div class="tem">
              <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 16">工伤假</div class="tem">
              <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 17">调休假</div class="tem">
              <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 18">产检假</div class="tem">
              <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 19">流产假</div class="tem">
              <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 20">长期病假</div class="tem">
              <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 21">补签</div class="tem">
              <div class="tem" v-show="scope.row.attendanceRecord[index].adtStatu == 99">-</div class="tem">
            </div>

          </template>
        </el-popover>
        <!--  -->
      </template>
    </el-table-column>
  </el-table>
  <Pagination :handleSizeChange="handleSizeChange" :total="total" />
</template>
<script setup lang="ts">
let y = defineProps(["attendanceList", 'total', 'handleSizeChange', 'days'])
import { ref, nextTick } from 'vue'
console.log(y.attendanceList);
</script>

<style scoped></style>